<template>
	<view>
		<fa-navbar title="首页"></fa-navbar>
		<view class="content">
			<view class="advert">
				<u-image width="702" v-if="blockDetail.image" radius="20" height="130" :src="blockDetail.image"></u-image>
			</view>
			<!-- <view class="swiper">
				<u-swiper :list="bannerList" @change="change" @click="openPage" keyName="image" :height="300" circular
					:autoplay="false" radius="10" bgColor="#ffffff"></u-swiper>
			</view> -->
			<view class="menu">
				<view class="flex jnpx">
					<text class="ft36 fw6 title">职业技能</text>
					<view class="flex" @click="openTraining">
						<text class="more">更多</text>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
					<!-- <text class="more">更多<u-icon name="arrow-right" size="32"></u-icon></text> -->
				</view>
				<view class="item">
					<!-- <u-grid :border="false" col="4">
						<u-grid-item v-for="(item,index) in majorList" :key="index" @click="openTraining1(item)">
							<u-icon :name="item.icon" :size="96"></u-icon>
							<text class="grid-text">{{item.name}}</text>
						</u-grid-item>
					</u-grid> -->
					<view class="m-list" v-for="(item,index) in majorList" :key="index"  @click="openTraining1(item)">
						<u-icon :name="item.icon" :size="96"></u-icon>
						<text class="grid-text">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="yxxy" v-if="vuex_config.yxxyswitch!='0'">
				<view class="flex title">
					<text class="ft36 fw6 t-yxxy">优秀学员</text>
					<view class="flex" @click="openArticle('/pages/trainee/trainee')">
						<text class="ft24 more">更多</text>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>

				</view>
				<view class="">
					<u-scroll-list :indicator="false">
						<view style="display: flex;flex-direction: row;">
							<view class="xy-items" v-for="(item,index) in traineeList" :key="index"
								@click="traineeDetail(item)">
								<view class="avatar">
									<u-image :src="item.image" width="180" height="135" radius="10"></u-image>
								</view>
								<view class="uinfo">
									<text class="uname">{{item.name}}</text>
									<text class="utype">{{item.intro || ''}}</text>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="zcjd" v-if="vuex_config.yxxyswitch!='0'">
				<view class="flex title">
					<text class="ft36 fw6">政策解读</text>
					<view class="flex" @click="openArticle('/pages/article/article')">
						<text class="ft24 more">更多</text>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
				</view>
				<view>
					<view class="flex jd-items" v-for="(item,index) in policyList" :key="index"
						@click="articleDetail(item)">
						<view class="left">
							<text class="left-t">{{item.name}}</text>
							<view class="left-l">
								<u-icon name="clock" size="32"></u-icon>
								<text class="dt">{{item.createtime_text}}</text>
							</view>
						</view>
						<view class="right">
							<u-image :src="item.cover" width="200" height="150" radius="10"></u-image>
						</view>
					</view>
				</view>
			</view>
			<view class="xy-course">
				<view class="flex title">
					<text class="ft36 fw6">线上学习</text>
					<view class="flex" @click="openArticle('/pages/article/article')">
						<text class="ft24 more">更多</text>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
				</view>
				<fa-course-item :courseList="courseList"></fa-course-item>
			</view>
		</view>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	export default {
		computed: {
			bannerList() {
				return this.vuex_config.bannerList || [];
			},
			majorList() {
				return this.vuex_config.majorList || [];
			},
			blockDetail(){
				return this.vuex_config.blockList.topadv || [];
			}

		},
		data() {
			return {
				traineeList: [],
				policyList: [],
				page: 1,
				has_more: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				courseList: [],
				advertImg: 'http://ob.kmjsxy.com/uploads/20250306/840b47d56cc3af68c6d400cdcf43d1c4.jpg'
			};
		},
		onShow() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				uni.$u.vuex('vuex_user', {});
			}
			// this.getTraineeList()
			// this.getPolicyList()
			this.getCourseList();
			//移除事件监听
			// uni.$off('uAvatarCropper', this.upload);

		},

		onReachBottom() {
			if (this.has_more) {
				this.page += 1;
				this.getCourseList();
			}
		},
		methods: {
			//优秀学员
			getTraineeList() {
				this.$api.getTraineeList({}).then((res) => {
					if (res.code) {
						this.traineeList = res.data
					}
				})
			},
			//政策解读
			getPolicyList() {
				this.$api.getPolicyList({
					params: {
						page: this.page
					}
				}).then((res) => {
					if (res.code) {
						if (this.page === 1) {
							this.policyList = [];
						}
						let policyList = res.data.data
						let pageList = res.data
						// this.has_more = policyList.length > 0;
						this.has_more = pageList.current_page < pageList.last_page;
						this.policyList = [...this.policyList, ...policyList];
					}
				})
			},
			//线上课程
			getCourseList() {
				this.$api.getCourseList({
					params: {
						page: this.page
					}
				}).then((res) => {
					if (res.code) {
						if (this.page === 1) {
							this.courseList = [];
						}
						let courseList = res.data.data
						let pageList = res.data
						// this.has_more = policyList.length > 0;
						// this.has_more = pageList.current_page < pageList.last_page;
						this.courseList = [...this.courseList, ...courseList];
					}
				})
			},
			openTraining() {
				uni.$u.route({
					url: '/pages/training/training',

				})
				return
			},
			openTraining1(e) {
				uni.$u.route({
					url: '/pages/training/training',
					params: {
						major_id: e.id
					}
				})
				return
			},
			traineeDetail(item) {
				if (item.type === 'outside') {
					uni.$u.vuex('vuex_webs', {
						title: item.name,
						url: item.linkurl
					});
					uni.$u.route({
						url: '/pages/webview/webview',

					})
					return
				}
				uni.$u.route({
					url: '/pages/trainee/detail',
					params: {
						article_id: item.id
					},
				})
				return
			},
			articleDetail(item) {
				if (item.type === 'outside') {
					uni.$u.vuex('vuex_webs', {
						title: item.name,
						url: item.linkurl
					});
					uni.$u.route({
						url: '/pages/webview/webview',
					})
					return
				}
				uni.$u.route({
					url: '/pages/article/detail',
					params: {
						article_id: item.id
					},
				})
				return
			},
			change() {},
			click() {
				console.log("eeee")
			},
			goPage(url, type) {
				if (this.vuex_user.isStore === false && type == 1) {
					uni.$u.route({
						url: '/pages/authentication/updataid',
						type: 'redirect',
					})
					return
				}
				uni.$u.route(url);
			},
			//文章列表
			openArticle(url) {
				uni.$u.route({
					url: url,
				});
				return
			},
			//用户信息
			getUserIndex() {
				this.$api.getUserInfo({}).then((res) => {
					if (res.code) {
						this.$u.vuex('vuex_user', res.data.userInfo);
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.content {
		padding: 32rpx 24rpx;

		.advert {
			margin-top: 168rpx;
		}

		.swiper {
			margin-top: 32rpx;
		}

		.menu {
			margin-top: 44rpx;
			.item{
				display: flex;
				flex-wrap: wrap;
				.m-list{
					padding: 16rpx 13rpx;
					width: 25%;
					text-align: center;
					/deep/ .u-icon__img{
						margin: auto;
					}
				}
			}
		}

		.flex {
			display: flex;
		}

		.ft24 {
			font-size: 24rpx;
		}

		.ft36 {
			font-size: 36rpx;
		}

		.fw6 {
			font-weight: 600;
		}

		.jnpx {
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC;
			font-size: 36rpx;
			color: #333333;
			padding-bottom: 36rpx;

			.title {
				font-weight: 600;
			}


		}

		.more {
			// padding-right: 24rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.item {
			.grid-text {
				font-size: 28rpx;
				padding: 12rpx 0;
			}
		}

		.yxxy {
			margin-top: 44rpx;
			background: url('/static/xybg.png') no-repeat;
			// background: linear-gradient(to bottom, #E1ECFF, #ffffff);
			background-color: #ffffff;
			background-size: 100%;
			border-radius: 20rpx;
			padding: 32rpx 24rpx;

			.title {
				align-items: center;
				justify-content: space-between;
			}

			.xy-items {
				width: 212rpx;
				height: 287rpx;
				border-radius: 20rpx;
				border: 1rpx solid #D9DDE4;
				margin-top: 24rpx;
				padding: 16rpx;
				margin-right: 24rpx;

				.uinfo {
					text-align: center;
					padding-top: 24rpx;

					text {
						display: block;
					}
				}

				.uname {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 12rpx;
				}

				.utype {
					font-size: 26rpx;
					color: #666666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 184rpx;
				}
			}
		}
		.xy-course{
			margin-top: 44rpx;
			.title {
				align-items: center;
				justify-content: space-between;
				margin-bottom: 44rpx;
			}
		}
		.zcjd {
			margin-top: 44rpx;

			.title {
				align-items: center;
				justify-content: space-between;
			}

			.jd-items {
				align-items: center;
				justify-content: space-between;
				background-color: #ffffff;
				padding: 24rpx;
				border-radius: 20rpx;
				margin-top: 24rpx;

				.left-t {
					font-size: 30rpx;
					color: #333333;
				}

				.left-l {
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					color: #999999;

					.dt {
						padding-left: 16rpx;
					}
				}

				.right {
					margin-left: 32rpx;
				}
			}
		}
	}
</style>